<template>
  <div class="app-container system-area">
    <!-- 头部按钮区域 -->
    <div class="btn-box">
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="dialogAddVisible = true"
      >
        新增
      </el-button>
      <div>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button
            size="mini"
            circle
            icon="el-icon-refresh"
            :disabled="loading"
            @click="getAllArea"
          ></el-button>
        </el-tooltip>
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      style="width: 100%"
      :data="tableData"
      :header-cell-style="{
        background: '#F8F8F9',
        color: '#606266'
      }"
      row-key="areaId"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      default-expand-all
    >
      <el-table-column prop="areaName" label="地域名称"></el-table-column>
      <el-table-column prop="leader" label="负责人"></el-table-column>
      <el-table-column prop="phone" label="联系方式"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="areaDesc" label="备注"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="showEditDialog(scope.row)"
          >
            修改
          </el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-plus"
            @click="showAddDialog(scope.row)"
          >
            新增
          </el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            @click="deleteArea(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <AddDialog
      ref="addAreaDialog"
      :dialog-visible="dialogAddVisible"
    ></AddDialog>
    <EditDialog :dialog-visible="dialogEditVisible"></EditDialog>
  </div>
</template>

<script>
import { getAllArea, deleteArea } from '@/api/super/area';
import AddDialog from './components/addAreaDialog';
import EditDialog from './components/editAreaDialog';
export default {
  name: 'AreaAdmin',
  components: {
    AddDialog,
    EditDialog
  },
  data() {
    return {
      // 加载遮罩
      loading: true,
      // 表格数据
      tableData: [],
      dialogAddVisible: false,
      dialogEditVisible: false,
      // 当前选择地域
      currentArea: {
        areaId: '',
        areaName: '',
        leader: '',
        phone: '',
        email: '',
        areaDesc: ''
      }
    };
  },
  created() {
    this.getAllArea();
  },
  methods: {
    /**
     * 获取所有地域
     */
    async getAllArea() {
      this.loading = true;
      const { data: res } = await getAllArea();
      console.log('api=获取所有地域', res);
      this.tableData = res.data.areaList;
      this.loading = false;
    },
    /**
     * 显示编辑对话框
     */
    showEditDialog(row) {
      this.currentArea = row;
      if (row.parentId === '0') {
        this.currentArea.parentId = null;
      }
      this.dialogEditVisible = true;
    },
    /**
     * 显示添加对话框，默认父级id
     */
    showAddDialog(row) {
      this.$refs.addAreaDialog.formData.parentId = row.areaId;
      this.dialogAddVisible = true;
    },
    /**
     * 删除地域
     */
    deleteArea(row) {
      this.$confirm('此操作将永久删除该地域, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await deleteArea(row.areaNumber);
          console.log('api=删除地域操作', res);
          if (res.code === 200) {
            this.$message.success('删除地域成功!');
            this.getAllArea();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss">
.system-area {
  .el-button [class*='el-icon-'] + span {
    margin-left: 0;
  }
}
</style>

<style lang="scss" scoped>
.el-table {
  margin-top: 10px;
}

.btn-box {
  display: flex;
  justify-content: space-between;
}
</style>
